<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件类型</title>
    <style>
        img {
            height: 400px;
            width: 1000px;
        }

        .盒子 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<h3>事件类型</h3>
<p>
    <img src="事件类型.png" alt=""> <br>
    事件监听的, 事件类型. 很多这里介绍常用的
</p>
<hr>


<div class="盒子"></div>
<hr>

<label>
    <input type="text" value="点击输入框">
</label>
<hr>

<h3>鼠标经过事件的区别</h3>
<p>
    鼠标经过事件： <br>
    mouseover 和 mouseout 会有冒泡效果 <br>
    mouseenter 和 mouseleave 没有冒泡效果 (推荐)
</p>
<script>
    // ------- 鼠标事件 -----------
    // 获取DOM元素
    const 盒子 = document.querySelector('.盒子')
    // 事件监听: 鼠标经过
    盒子.addEventListener('mouseenter', function () {
        盒子.innerHTML = '鼠标进入盒子'
    })
    // 事件监听:  鼠标离开
    盒子.addEventListener('mouseleave', function () {
        盒子.innerHTML = '鼠标离开了, 盒子'
    })


    // ------- 焦点事件 -----------
    const 输入框 = document.querySelector('input')
    // 事件监听: 获得焦点
    输入框.addEventListener('focus', function () {
        输入框.value = '有焦点触发'
    })
    // 事件监听: 失去焦点
    输入框.addEventListener('blur', function () {
        输入框.value = '失去焦点触发'
    })


    // ------- 键盘事件 -----------
    const 输入框2 = document.querySelector('input')
    // 事件监听: 键盘按下
    输入框2.addEventListener('keydown', function () {
        console.log('键盘按下了') // 控制台输出
    })
    // 事件监听: 键盘松开
    输入框2.addEventListener('keyup', function () {
        console.log('键盘弹起了')
    })


    // ------- 文本事件 -----------
    const 输入框3 = document.querySelector('input')
    // 事件监听: 用户输入事件
    输入框2.addEventListener('input', function () {
        console.log(输入框3.value) // 控制台输出, 用户在输入框里输入的信息
    })

</script>
</body>
</html>